import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:convex_bottom_bar/convex_bottom_bar.dart';

import '../controllers/tabbar_controller.dart';
import '../../home/views/home_view.dart';
import '../../device/views/device_view.dart';
import '../../message/views/message_view.dart';
import '../../mine/views/mine_view.dart';

class TabbarView extends GetView<TabbarController> {
  const TabbarView({super.key});

  @override
  Widget build(BuildContext context) {
    return Obx(
      () => Scaffold(
        body: IndexedStack(
          index: controller.currentIndex.value,
          children: const [HomeView(), DeviceView(), MessageView(), MineView()],
        ),
        bottomNavigationBar: ConvexAppBar(
          key: ValueKey(controller.currentIndex.value), // 强制重建以响应变化
          style: TabStyle.react, // 使用反应式凸起样式
          backgroundColor: Colors.white,
          color: const Color(0xFF999999), // 未选中颜色
          activeColor: const Color(0xFF047FF7), // 选中颜色
          height: 120.h,
          curveSize: 100.w, // 增大凸起大小
          top: -20.h, // 增加凸起高度
          elevation: 0, // 移除阴影
          shadowColor: Colors.transparent, // 透明阴影
          items: [
            TabItem(
              icon: Image.asset(
                controller.iconList[0],
                width: 48.w,
                height: 48.h,
              ),
              activeIcon: Transform.translate(
                offset: Offset(0, -8.h), // 上移
                child: Image.asset(
                  controller.selectedIconList[0],
                  width: 64.w, // 放大
                  height: 64.h,
                ),
              ),
              title: controller.titleList[0],
            ),
            TabItem(
              icon: Image.asset(
                controller.iconList[1],
                width: 48.w,
                height: 48.h,
              ),
              activeIcon: Transform.translate(
                offset: Offset(0, -8.h), // 上移
                child: Image.asset(
                  controller.selectedIconList[1],
                  width: 64.w, // 放大
                  height: 64.h,
                ),
              ),
              title: controller.titleList[1],
            ),
            TabItem(
              icon: Image.asset(
                controller.iconList[2],
                width: 48.w,
                height: 48.h,
              ),
              activeIcon: Transform.translate(
                offset: Offset(0, -8.h), // 上移
                child: Image.asset(
                  controller.selectedIconList[2],
                  width: 64.w, // 放大
                  height: 64.h,
                ),
              ),
              title: controller.titleList[2],
            ),
            TabItem(
              icon: Image.asset(
                controller.iconList[3],
                width: 48.w,
                height: 48.h,
              ),
              activeIcon: Transform.translate(
                offset: Offset(0, -8.h), // 上移
                child: Image.asset(
                  controller.selectedIconList[3],
                  width: 64.w, // 放大
                  height: 64.h,
                ),
              ),
              title: controller.titleList[3],
            ),
          ],
          initialActiveIndex: controller.currentIndex.value, // 配合key重建确保正确状态
          onTap: (index) => controller.changeTabIndex(index),
        ),
      ),
    );
  }
}
